<template>
  <main class="summary">
    <div class="tabs">
      <div :class="['item',selectedValue===item.value?'active':'']"
           ref="tebItem"
           @click="changeTab(item)"
           v-for="item in tabData"
           :key="item.value">
        {{ item.label }}
      </div>
      <div class="block" ref="block" :style="blockStyle"></div>
    </div>
    <div class="content">
      <slot>

      </slot>

    </div>
  </main>
</template>

<script lang="ts">


export default {
  props: {
    tabData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedValue: "a",
      mount: false,
    }
  },
  computed: {
    blockStyle() {
      if (!this.mount) return {left: 0};
      const index = this.tabData.findIndex(item => item.value === this.selectedValue);
      const ref = this.$refs['tebItem'][index];
      return {
        left: `${ref.offsetLeft}px`,
        width: `${ref.clientWidth}px`
      }
    }
  },
  mounted() {
    this.mount = true;
  },
  methods: {
    changeTab(e) {
      this.selectedValue = e.value
      this.$emit('change',e);
    }
  }
}
</script>

<style scoped lang="stylus">
.summary {
  .tabs {
    display flex
    position relative

    .item {
      transition all 0.5s
      cursor pointer
      font-size: 14px;
      margin-right 30px
    }

    .active {
      color: #4B82FB;
    }

    .block {
      transition all 0.5s
      background: #4B82FB;
      height 4px
      width 50px
      position absolute
      bottom -10px
    }
  }

  .content {
    display flex
    align-items center


  }
}
</style>
